<template>
  <div class="app-container">
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="margin-left: 20px; margin-top: 12px;"
    >
      <el-form-item label="日期">
        <el-date-picker
          v-model="searchData.beginDate"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
          type="date"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchData.endDate"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
          type="date"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getListPage()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      fit
      stripe
      highlight-current-row
      element-loading-text="数据加载中"
      :summary-method="getSummaries"
      show-summary
    >
      <el-table-column prop="date" label="序号" width="70" align="center" fixed>
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="plan_areano" label="作业区" align="center" />

      <el-table-column prop="hotWashNum" label="热洗井次" sortable align="center" />

      <el-table-column prop="hotWashSum" label="热洗用液量（m3）" align="center" />

      <el-table-column prop="dosageNum" label="化清井次" sortable align="center" />

      <el-table-column prop="dosageSum" label="清蜡剂用量（m3）" align="center" />
    </el-table>

  </div>
</template>

<script>
export default {
  name: 'RunStatistics',

  data: function() {
    return {
      searchData: {},
      page: 1,
      limit: 10,
      total: 0,
      tableData: [

      ],
      statisticsQuery: [
        {

        }
      ]
    }
  },


  created() {
    this.getListPage(this.searchData)
  },

  methods: {
    getListPage(data) {
      this.$http.post('/summaryStatistics/run', {
        beginDate:this.searchData.beginDate,
        endDate:this.searchData.endDate
      }).then(({ data: { data: res } }) => {
        this.tableData = res
      }).catch(err => {
        this.$message.error(err)
      })
    },
    resetData() {
      this.searchData = {}
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (index !== 1 && index !== 3 && index !== 5) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = '--'
        }
      })
      return sums
    }
  }
}
</script>

<style scoped>

</style>
